import React from "react";
import {
    Input,
    InputGroup,
    InputLeftAddon,
    Flex,
    Button,
    FormControl,
    Box,
    Divider,
    Text,
    Link,
    useToast,
} from "@chakra-ui/react";
import { MdPerson, MdLock, MdPhoneIphone } from "react-icons/md";
import { FaWeixin, FaQq } from "react-icons/fa";
import { useFormik } from 'formik'

export default function SignUp() {
    const toast = useToast()
    const formik = useFormik({
        initialValues: {},
        validate: values => {
            const errors = {}
            if (!values.username) {
                errors.username = '请输入你的昵称'
            } else if (values.username.length > 20) {
                errors.username = '昵称的长度不能大于20'
            }
            if (!values.email) {
                errors.email = '请输入手机号'
            } else if (values.email.length > 20) {
                errors.email = '手机号的长度不能大于20'
            }
            if (!values.password) {
                errors.password = '请输入密码'
            } else if (values.password.length < 8) {
                errors.password = '密码的长度不能小于8'
            }
            return errors
        },
        onSubmit: values => {
            console.log('==values', values)
            fetch('https://conduit.productionready.io/api/users', {
                method: 'POST',
                headers: {
                    'content-type': 'application/json'
                },
                mode: 'cors',
                body: JSON.stringify({ user: values })
            }).then(function (response) {
                response.json().then((res) => {
                    console.log('==res', res)
                    // res = {
                    //     "user": {
                    //         "id": 167300,
                    //         "email": "betteryangjie@qq.com",
                    //         "createdAt": "2021-05-04T12:01:09.882Z",
                    //         "updatedAt": "2021-05-04T12:01:09.891Z",
                    //         "username": "betteryangjie",
                    //         "bio": null,
                    //         "image": null,
                    //         "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6MTY3MzAwLCJ1c2VybmFtZSI6ImJldHRlcnlhbmdqaWUiLCJleHAiOjE2MjUzMTM2Njl9.LIkgffmRSrcu43zz6vomvZ9kfgsxRDVuxZ79A6rUZoA"
                    //     }
                    // };
                    if (res.errors) {
                        let errorArr = [];
                        for (let [key, values] of Object.entries(res.errors)) {
                            for (let value of values) {
                                errorArr.push(`${key} ${value}`);
                            }
                        }
                        toast({
                            title: errorArr.join(','),
                            position: 'top',
                            status: 'error',
                            isClosable: false,
                        })
                        return;
                    }
                    if (res.user) {
                        toast({
                            title: `${res.user.username}注册成功`,
                            position: 'top',
                            status: 'success',
                            isClosable: false,
                        })
                    }
                })
            })
        }
    })
    return (
        <form onSubmit={formik.handleSubmit}>
            <Box bgColor="hsla(0,0%,71%,.1)" borderWidth="1px" borderStyle="solid" borderColor="brand.border" borderRadius="4px 4px 4px 4px">
                <FormControl isDisabled={false} isInvalid={false}>
                    <InputGroup borderColor="transparent">
                        <InputLeftAddon children={<MdPerson />} fontSize={20} bgColor="transparent" color="brand.sub" px={2} />
                        <Input
                            placeholder="你的昵称"
                            _focus={{ border: 'none' }}
                            _hover={{ border: 'none' }}
                            border="none"
                            pl={1}
                            name="username"
                            value={formik.values.username}
                            onChange={formik.handleChange}
                            onBlur={formik.handleBlur}
                        />
                    </InputGroup>
                    <Text color="#e53e3e" textAlign="left" pl="42">
                        {formik.touched.username && formik.errors.username ? formik.errors.username : null}
                    </Text>
                </FormControl>
                <Divider borderColor="brand.border" />
                <InputGroup borderColor="transparent">
                    <InputLeftAddon children={<MdPhoneIphone />} fontSize={20} bgColor="transparent" color="brand.sub" px={2} />
                    <Input
                        placeholder="手机号"
                        _focus={{ border: 'none' }}
                        _hover={{ border: 'none' }}
                        border="none"
                        pl={1}
                        name="email"
                        value={formik.values.email}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                    />
                </InputGroup>
                <Text color="#e53e3e" textAlign="left" pl="42">
                    {formik.touched.email && formik.errors.email ? formik.errors.email : null}
                </Text>
                <Divider borderColor="brand.border" />
                <InputGroup borderColor="transparent">
                    <InputLeftAddon children={<MdLock />} fontSize={20} bgColor="transparent" color="brand.sub" px={2} />
                    <Input
                        type="password"
                        placeholder="设置密码"
                        _focus={{ border: 'none' }}
                        _hover={{ border: 'none' }}
                        border="none"
                        pl={1}
                        name="password"
                        value={formik.values.password}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                    />
                </InputGroup>
                <Text color="#e53e3e" textAlign="left" pl="42">
                    {formik.touched.password && formik.errors.password ? formik.errors.password : null}
                </Text>
            </Box>
            <Button _hover={{ bgColor: "#35B01A" }} w="100%" colorScheme="teal" bgColor="#42c02e" borderRadius="25px" mt={5} type="submit">注册</Button>
            <Text whiteSpace="nowrap" px={4} fontSize={12} color="#b5b5b5" fontWeight={500} mt={3}>点击 “注册” 即表示您同意并愿意遵守简书</Text>
            <Flex justifyContent="center" fontSize={12} color="#b5b5b5" fontWeight={500}>
                <Link href="#" isExternal fontSize={12} color="#3194d0">用户协议</Link>
                <Text px={1}>和</Text>
                <Link href="#" isExternal fontSize={12} color="#3194d0">隐私政策</Link> 。
                </Flex>
            <Flex alignItems="center" justifyContent="space-evenly" px={6} pt={42}>
                <Divider />
                <Text whiteSpace="nowrap" px={4} fontSize={12} color="#b5b5b5" fontWeight={500}>社交帐号直接注册</Text>
                <Divider />
            </Flex>
            <Flex justifyContent="space-evenly" fontSize={28} pt={2}>
                <FaWeixin color="#00bb29" />
                <FaQq color="#498ad5" />
            </Flex>
        </form>
    );
}
